<template>
  <div class="mainbox">
    <Banner></Banner>
    <mainContent :catname="catename">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}">{{catename}}</dt>
          <dd v-for="(item,index) in new_menu_list" :class="active==index?'menu_dd hover':'menu_dd'"
              @click="ToNewPath(item,index)">{{item.title}}
          </dd>
        </dl>
      </div>
      <div slot="inner_content" style="box-sizing: border-box;">
        <div class="page_con" style="height: 685px;overflow: hidden;">
          <div v-if="is_flag==0" v-html="new_rich_content" style="height: 685px;overflow-y: scroll;"></div>
          <div v-if="is_flag==1" class="right">
            <div v-for="(item,index) in dynamicList" :key="index" @click="toPath(item)" class="dynamic_list">
              <p class="title_list" style="color: black;font-size: 30px">{{item.title}}</p>
              <div class="title_desc">{{item.desc | handelRichText(item.desc)}}</div>
              <p class="title_time" style="font-size: 28px;color: #a3afb7;text-align: right">{{item.create_time }}</p>
            </div>
            <!--添加分页-->
            <el-pagination
              :style="{'--activeColor':this.$util.storage.get('color')}"
              background
              layout="prev, pager, next"
              :page-size="6"
              :page-count="8"
              @current-change="pageChange"
              :total="total">
            </el-pagination>
            <!--添加分页-->
          </div>
          <router-view v-if="is_flag==3" @childData="getactive"></router-view>
        </div>
      </div>
    </mainContent>
    <MainMenu></MainMenu>
    <footerBar></footerBar>
  </div>
</template>

<script>
  import Banner from '../../components/bannder/Banner'
  import MainMenu from '../../components/mainmenu/MainMenu'
  import mainContent from '../../components/content/mainContent'
  import footerBar from '../../components/content/footerBar'

  export default {
    name: "Modernization",
    data() {
      return {
        new_menu_list: [],//新列表的菜单数组
        article_param:null,//文章访问时候的参数
        content_type:null,//判断是链接还是单页
        isEmpty:false,//是否显示暂无数据，默认不显示
        page:1,//当前第几页，默认显示第一页
        size:6,//每页显示几条记录，默认显示为6条
        total:null,//分页列表总记录条数
        active: 0,//当前的激活选项，默认为0
        new_rich_content: '',//新的富文本内容
        is_flag: null,//判断文章的显示状态，0文章页，1列表，
        dynamicList: [],//富文本数据
        catename: '',
        title_detail: '',//调往详情页面的标题
        menu_bg: '',
      }
    },
    components: {
      Banner,
      MainMenu,
      mainContent,
      footerBar
    },

    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to,from) {
        console.log('1112acitive:',this.active)
      },
    },

    created() {
      this.menu_bg = this.$util.storage.get("menu_bg");
      console.log('当前路由this.$route,', this.$route.path);
      this.catename = this.$route.query.name;

      this.getColumnContent();


    },
    methods: {

      ToNewPath(item, index) {
        let that = this;
        console.log('点击获得的item值为：',item);
        that.title_detail=item.title;//保存跳往详情页面的标题
        that.active=index;
        that.getPageAndLink(item,index);
      },

      toPath(item) {
        let that = this;
        console.log('进入详情页面：', item);
        that.$router.push("/detail?id=" + item.id + "&name=" + that.title_detail);
      },//点击进入详情页面

      getColumnContent() {
        let that = this;
        let params = {
          vollege_id:that.$util.vollege_id,
          pid:that.$route.query.pid
        };
        that.$http.get("/api/PcData/getMenuData",params,r=>{
          console.log('获得的栏目数据为：r：',r.data.menu);
          that.new_menu_list=r.data.menu;
          that.getPageAndLink(r.data.menu[0],0);//判断第一项是文章还是列表，默认不能在后台设置成链接页面
        });
      },//获取栏目菜单，类型为文章页，列表页，混合页

      getPageAndLink(item,index){
        let that = this;
        console.log('item.content_type:',item.content_type);
        that.article_param=item.param;
        that.content_type=item.content_type;
        item.content_type != "url" ? that.isListContent(item):that.$router.push({path:item.url,query:{name:item.title,pid:item.id,childdata:index}});that.is_flag=3;
      },//判断是文章还是外链

      isListContent(item){
        let that = this;
        let params = {
          page:that.page,
          limit:that.size,
        }
        that.$http.get("/api/PcData/getData?"+item.param +"&vollege_id="+that.$util.vollege_id,params,r=>{
          console.log('获得的文章信息为：',r.data);
          r.data.length==1?that.is_flag=0:that.is_flag=1;
          r.data.length==1?that.new_rich_content=r.data[0].content:that.dynamicList=r.data;
          r.data.length==0?that.isEmpty=true:that.isEmpty=false;
          that.total=r.data.length;
        });

      },//判断是否是列表还是单页面

      pageChange(page){
        console.log('页码发生了改变！当前页码：',page);
        let that = this;
        let params = {
          page:page,
          limit:that.size,
        }
        that.$http.get("/api/PcData/getData?"+that.article_param +"&vollege_id="+that.$util.vollege_id,params,r=>{
          console.log('获得的文章信息为：',r.data);
          r.data.length==1?that.is_flag=0:that.is_flag=1;
          r.data.length==1?that.new_rich_content=r.data[0].content:that.dynamicList=r.data;
          r.data.length==0?that.isEmpty=true:that.isEmpty=false;
        });
      },

      getactive(data) {
        console.log('子路由传递过来的值为：',data);
        let that = this;
        if (that.content_type != "url") {
          return;
        }
        data?that.active=data:that.active=0;
      },

    }
  }
</script>

<style scoped>

  .page_con {
    padding: 60px 30px 0;
  }

  .right {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    overflow-y: scroll;
  }

  .dynamic_list {
    margin-bottom: 15px;
    width: 100%;
    height: 130px;
    box-sizing: border-box;
    padding-left: 10px;
    border-bottom: 2px solid #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .title_list {

  }

  .title_desc {
    width: 82%;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .title_time {

  }

  .el-pagination{
    height: 100px;
    padding-top: 53px;
    text-align: center;
  }
  .right >>> .el-pager{
    height: 100px;
  }
  .right >>> .el-pager li{
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin-right: 20px;
  }
  .right >>> .el-pager li:first-child{
    height: 50px;
    width: 50px;
    line-height: 50px;
    /*margin-left: 20px;*/
  }
  .right >>> .btn-prev{
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
  .right >>> .btn-next{
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
  .right >>> .el-pagination.is-background .el-pager li:not(.disabled).active{
    /*background: #29be74;*/
    background: var(--activeColor) !important;
  }



</style>
